import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { AutocompleteComponent } from './autocomplete/autocomplete.component';

export const SearchConfig = {
  location: 'Search',
  description: '搜索是帮助用户查找内容的过滤器。用户通过输入关键词、控制筛选条件对指定区域的数据进行搜索，以获取所需的内容。',
  description_en:
    'Search is a filter that helps users find content. The user searches the data of the specified area by inputting keywords and controlling the filtering conditions to obtain the desired content.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/search/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription:
        '多用于页面的全局搜索或指定区域的搜索，可配置自动聚焦，lvLoading 参数可阻止多次频繁触发搜索。可敲击键盘 "Enter" 键手动触发搜索。',
      demoDescription_en:
        'Mostly used for global search of pages or search for specified areas, auto focus can be configured, and lvLoading parameter can prevent multiple frequent triggers. The search can be triggered manually by hitting the keyboard "Enter".',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/search/demo2/demo2.component',
      demoTitle: '自动触发搜索',
      demoTitle_en: 'Auto Trigger Search',
      demoDescription:
        '多用于页面的全局搜索或指定区域的搜索，可配置自动聚焦，lvLoading 参数可阻止多次频繁触发搜索。可通过输入时自动触发搜索。',
      demoDescription_en:
        'Mostly used for global search of pages or search for specified areas, auto focus can be configured, and lvLoading parameter can prevent multiple frequent triggers. The search can be triggered automatically by typing.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/search/demo3/demo3.component',
      demoTitle: '嵌入使用',
      demoTitle_en: 'Embedded Use',
      demoDescription: '用于嵌入其他组件和模块中使用，无边框和背景。',
      demoDescription_en: 'Used to embed other components and modules, no borders and backgrounds.',
    },
    {
      demo: AutocompleteComponent,
      codePath: 'showcase/search/autocomplete/autocomplete.component',
      demoTitle: '自动完成',
      demoTitle_en: 'With Autocomplete',
      demoDescription: '启用输入时的自动完成功能。',
      demoDescription_en: 'Enables auto-completion on input.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-search',
  snippet: `<lv-search [lvFocus]="\${1:true}" [lvLoading]="\${2:loading}" (lvSearch)="\${3:change($event)}" [lvPlaceHolder]="\${4:Search}"></lv-search>`,
  api: [
    {
      attribute: 'lvType',
      type: 'string',
      default: 'default',
      description: `搜索组件类型( 'default' | 'inner' )，'inner' 为嵌入其他组件或模块时使用。`,
      description_en: `Search for component types ( 'default' | 'inner' ), 'inner' for use when embedding other components or modules.`,
    },
    {
      attribute: 'lvPlaceHolder',
      type: 'string',
      default: 'null',
      description: '搜索组件的提示信息。',
      description_en: 'Search for prompt information for components.',
    },
    {
      attribute: 'lvFocus',
      type: 'boolean',
      default: 'false',
      description: `自动聚焦。`,
      description_en: `Auto focus.`,
    },
    {
      attribute: 'lvMaxLength',
      type: 'number',
      default: '100',
      description: '允许输入的最大字符数。',
      description_en: 'The maximum number of characters allowed to be entered.',
      global: true,
    },
    {
      attribute: 'lvLoading',
      type: 'boolean',
      default: 'false',
      description: '配置为 true 时，显示正在搜索的样式，并阻止搜索组件其他操作。',
      description_en: 'When configured to true , displays the style being searched and blocks other operations of the search component.',
    },
    {
      attribute: 'lvAutocomplete',
      type: 'boolean',
      default: 'false',
      description: '是否开启自动完成，默认不开启。',
      description_en: 'Whether to enable automatic completion.',
    },
    {
      attribute: 'lvAutocompleteData',
      type: 'string[] | AutocompleteItem[]',
      default: '[]',
      description: `自动完成的数据源，当类型为AutocompleteItem[]时，AutocompleteItem 必须包含一个 value:string 字段，作为填充的值。`,
      description_en: `Data source that is automatically completed. When the type is AutocompleteItem[], AutocompleteItem must contain a [value:string] field as the input value.`,
    },
    {
      attribute: 'lvAutocompleteLabelTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `下拉选项的 label 自定义模板，该模板对所有选项项有效。`,
      description_en: `Customised Label template of the autocomplete item, which is valid for all items.`,
    },
    {
      attribute: 'lvAutocompleteLoading',
      type: 'boolean',
      default: 'false',
      description: `加载状态，在数据源为异步数据时，配合使用。`,
      description_en: `Loading status. This parameter is used when the data source is asynchronous data.`,
    },
    {
      attribute: 'lvAutocompletePanelClass',
      type: 'string',
      default: '--',
      description: `自定义下拉面板的样式类。`,
      description_en: `Customizing the style class of the panel.`,
    },
    {
      attribute: 'lvDisabled',
      type: 'boolean',
      default: 'false',
      description: `是否禁用搜索框。`,
      description_en: `Whether to disable Search.`,
    },
  ],
  event: [
    {
      event: 'lvSearch',
      parameter: `value`,
      description: '触发搜索后的回调函数，参数 value 为输入的搜索关键字。输入实时搜索使用 ngModelChange() 方法。',
      description_en:
        'The callback function after the search is triggered, the parameter value is the input search keyword. Enter the real-time search using the ngModelChange() method.',
    },
    {
      event: 'lvClear',
      parameter: `--`,
      description: '触发清除按钮的回调函数。',
      description_en: 'Callback function that triggers the clear button.',
    },
    {
      event: 'lvOnFocus',
      parameter: `value`,
      description: '搜索框聚焦的回调函数，参数 value 为输入的搜索关键字。',
      description_en: 'The callback function after focused. The parameter value is the entered search keyword.',
    },
    {
      event: 'lvAutocompleteInputChange',
      parameter: `value`,
      description: '文本框手动输入时的回调函数。',
      description_en: `Callback function used when a text box is entered manually.`,
    },
  ],
};
